<template>
    <div class="continer">
        <video  controls>
            <source src="http://127.0.0.1/video/myself.mp4/"  type="video/mp4">
            您的浏览器不支持 HTML5 video 标签。d
        </video>
        <video id="video_play" src="" controls autoplay>
        </video>
        <div class="continer text-center">
            <input class="btn btn-primary up" type="file" name="upload" id="upImageFile" v-on:change="up_img"/>
            <br>
            <button class="btn btn-primary up " ref="lod">
                <span class="spinner-border spinner-border-sm"></span>
                Loading..
            </button>
            <button class="btn btn-primary" id="play" v-on:click="all_play">同时播放</button>
        </div>
    </div>
  </template>
  
<script>
    export default{
        data(){
            return{
                time : new Date(),
                imgStr : ''
            }
        },
        mounted(){
            $("#video_play").hide();
            $("#play").hide();
            this.$refs.lod.style.display = 'none';
        },
        methods: {
            up_img(){
                self = this;
                var image = document.querySelector("img");
                let files = document.getElementById('upImageFile').files[0];
                var file_name_time = localStorage.getItem("user");
                const reader = new FileReader();
                reader.readAsDataURL(files)
                    reader.onload = () => {
                    this.$refs.lod.style.display = 'inline-block';
                    self.imgStr = reader.result.replace(/^data:image\/\w+;base64,/, "");
                    $.ajax({
                        type: 'POST',
                        url: "http://127.0.0.1:80/upimg/",
                        headers: {
                            "Content-type": "application/x-www-form-urlencoded",
                            "token": localStorage.getItem("token")
                        },
                        data: { 
                            base64: self.imgStr, 
                            name: file_name_time 
                        },
                        success: function(response) {
                            console.log(response);
                        // Handle the response here
                        alert("上传成功")
                        
                        $("#video_play").show();
                        $("#play").show();
                        self.$refs.lod.style.display = 'none';
                        $("#video_play").attr("src","http://127.0.0.1/video/"+response.file_name+".mp4/")
                        },
                        error: function(xhr, exception){
                            if(xhr.status=="403"){
                                alert("token出错")
                            }
                        }
                    });
                }
            },
            all_play(){
                $("video")[0].play();
                $("video")[1].play();
            }

        }
    }
    // $("#thumbnail").hide();

</script>
<style>
    .up {
        width: 20%;
        /* 调整字体大小 */
        font-size: 5px;
        margin-bottom: 5px;
        /* display: inline-block; */
    }
</style>